<template>
	<view class="home">
		<scroll-view scroll-y :show-scrollbar="true">
			<view class="top-bg" :style="{ height: `calc(25vh + ${getstatusBarHeight()}px)` }"></view>
			<nav-bar-height topHeight="toButton" />
			<!-- <text class="home-title">好吃好喝</text> -->
			<view class="header">
				<image src="../../static/home-title.png" mode="" class="home-title"></image>
				<view class="loaction">
					<text class="top">当前位置:</text>
					<text class="bottom">火星</text>
				</view>
			</view>
			<view class="home-content">

				<search title="现在搜索-美食等你" bg="white" />
				<view class="swiper">
					<swiper autoplay circular interval='7000'>
						<swiper-item v-for="item of 4" :key="item">
							<view class="like" @click="handleFoodPreview">
								<image src="../../static/images/food1.jpg" mode="aspectFill"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<!-- wdawdaw -->
				<view class="text-good">
					<image src="../../static/images/good-text.png" mode="widthFix"></image>
				</view>
				<view style="display: flex;gap: 20rpx;margin: 20rpx 20rpx;">
					<good-big />
					<view class="small" style="display: flex;flex-direction: column;gap: 20rpx;">
						<good-small />
						<good-small />
					</view>
				</view>
				<!-- 122323 -->
				<view class="list">
					<!-- <theme-item v-for="item of 10"/> -->
					<theme-item v-for="item of list" :item="item" :key="item.id"></theme-item>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { getstatusBarHeight } from '@/utils/system.js';
// const num = ref(25)
const theList = [
	{
		url: '../../static/images/food1.jpg',
		title: '汉堡王 西餐快餐/汉堡',
		desc: '汉堡炸鸡都是现做的',
		price: '12',
		sold: '1024',
		id: 100
	},
	{
		url: '../../static/images/food1.jpg',
		title: '汉堡王 西餐快餐/汉堡',
		desc: '汉堡炸鸡都是现做的',
		price: '12',
		sold: '1024',
		id: 101
	},
	{
		url: '../../static/images/food1.jpg',
		title: '汉堡王 西餐快餐/汉堡',
		desc: '汉堡炸鸡都是现做的',
		price: '12',
		sold: '1024',
		id: 102
	},
	{
		url: '../../static/images/food1.jpg',
		title: '汉堡王 西餐快餐/汉堡',
		desc: '汉堡炸鸡都是现做的',
		price: '12',
		sold: '1024',
		id: 103
	},
	{
		url: '../../static/images/food1.jpg',
		title: '汉堡王 西餐快餐/汉堡',
		desc: '汉堡炸鸡都是现做的',
		price: '12',
		sold: '1024',
		id: 104
	}
]
const list = ref(theList)



// 点击轮播图跳转到食物详情页
const handleFoodPreview = () => {
	uni.navigateTo({
		url: '/pages/foodPreview/foodPreview'
	})
}


</script>
<style scoped lang="scss">
.home {
	position: relative;
	// top: 0;
	// height: 100vh;

	.top-bg {
		width: 100vw;
		background-color: #FF4F51;
		border-radius: 0 0 36% 36%;
		padding-top: 30rpx;
		// position: fixed;
		position: absolute;
		top: 0;
		z-index: 0;
	}

	.header {
		display: flex;
		flex-direction: row;
		position: relative;

		// justify-content: right;
		.home-title {
			margin-top: 20rpx;
			height: 140rpx;
			width: 400rpx;

		}

		.loaction {
			position: relative;
			display: inline;
			color: white;
			// bottom: 0;
			margin-top: auto;
			display: flex;
			flex-direction: column;
			// top: 120rpx;

			.top {
				// display: inline-block;
			}

			.bottom {
				margin-left: 60rpx;
			}

			// display: flex;
			// flex-direction: column;
			// float: left;
		}
	}

	.home-content {
		z-index: 100;
		position: relative;

		.swiper {
			// padding: 30rpx 0;
			width: 100%;


			swiper {
				margin: auto;
				width: 700rpx;
				height: 340rpx;
				overflow: hidden;
				border-radius: 20rpx;

				swiper-item {
					width: 100%;
					height: 100%;
					// padding: 0 30rpx;
					// margin: 0 30rpx;

					.like {
						width: 100%;
						height: 100%;

						image {
							width: 100%;
							height: 100%;
							// border-radius: 20rpx;
						}
					}
				}
			}
		}

		.text-good {
			// paddin20rpx;
			// margin: auto;
			width: 100%;
			padding-top: 20rpx;

			image {
				width: 100%;
			}
		}

		.list {
			padding: 0 20rpx;
		}
	}
}
</style>
<style></style>
